<template>
  <div >
    <el-dialog title="导入图片"
     :visible.sync="showDialog" 
     @close="closed"
      width="735px"
     :close-on-click-modal="false" 
     class="roll-dialog"
     :before-close="closeDia"
     >
      <el-form ref="formData"  :rules="rulesForm" size="small" class="demo-ruleForm">
        <el-form-item
          label="AI题库"
          prop="approvalDesc"
          :label-width="'110px'">
           <el-select
              size="small"
              v-model="listForm.status"
              clearable
              placeholder="请选择分类"
              class="w100"
            >
              <el-option
                v-for="item in currentNode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item
          label="题库分类"
          prop="approvalDesc"
          :label-width="'110px'">
           <el-select
              size="small"
              v-model="listForm.status"
              clearable
              placeholder="请选择分类"
              class="w100"
            >
              <el-option
                v-for="item in currentNode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item
          label="实操课程"
          prop="approvalDesc"
          :label-width="'110px'">
           <el-select
              size="small"
              v-model="listForm.status"
              clearable
              placeholder="请选择分类"
              class="w100"
            >
              <el-option
                v-for="item in currentNode"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
        </el-form-item>
        <el-form-item
          label='图片选择'
          prop="fileCondition"
          :label-width="'110px'">
          <el-upload
            ref="fileCondition"
            class="upload-demo"
            action=""
            :on-remove="handleRemove"
            :on-change="handleChange"
            multiple
            :limit="3"
            :on-exceed="handleExceed"
            :file-list="fileList"
            :http-request="uploadFile"
            :before-upload="beforeUpload"
            :before-remove="beforeRemove"
            list-type="picture-card"
          >
            <i class="el-icon-plus"></i>
            <div slot="tip" class="el-upload__tip" >
              注：最多可导入10张，大小最大不超过1M，格式JPG/PNG/PEG
            </div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="addOpinion">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import {
//   addMidwayOpinion,
//   uploadRequirAttachment
// } from "@/api/demandWorkManage/index";
export default {
  props: {
    isShow: {
      type: Boolean
    }
  },
  data() {
    return {
      listForm: {
        status:"1",
        fileCondition:[]
      },
      fileList:[],
      currentNode: [
        {
          label: '需求已提交',
          value: 1
        }, {
          label: '需求已派单',
          value: 3
        }],
      rulesForm:{
        approvalDesc: [
          { required: true, message: '请输入中途意见', trigger: 'blur' }
        ]
      },
    };
  },
  computed:{
    showDialog:{
        get(){
            return this.isShow
        }
    }
  },
  mounted() {
     
  },
  watch: {
  },
  methods: {
     addOpinion(){
      this.$refs.formData.validate((valid) => {
        if (valid) {
          // let params = {
          //   "srCode":this.srCode,
          //   "approvalDesc":this.formData.approvalDesc,
          //   "attanchmentJson":this.formData.fileCondition.length>0?JSON.stringify(this.formData.fileCondition):""
          // }
        } else {
          return false
        }
      })
    },
    closed(){

    },
    closeDia(){
        this.listForm= {
            fileCondition:[],
            approvalDesc:''
          }
          this.fileList=[];
          this.$refs["formData"].resetFields();
          this.$emit("closeBox", false, false);
    },
    uploadFile({file}) {//自定义上传
      let params = new FormData()
      params.append('file', file)
      params.append('type', 2)
      // return uploadRequirAttachment(params).then((res)=>{
      //   res.DATA.forEach(element => {
      //     this.formData.fileCondition.push({
      //       "attachCategory":"1",//附件分类1工单附件2预审附件
      //       "attachTitle":element.name,//附件名称
      //       "attachType":element.type,//附件类型，后缀名称如txt,jpg,doc,xml
      //       "attachFile":element.url,//附件地址
      //       "attachId":element.id,//id
      //        uid:file.uid
      //     })
      //   });
      //   console.log(this.formData.fileCondition)
      // }).catch((error)=>{
      //   let uid = file.uid
      //   let idx = this.$refs.fileCondition.uploadFiles.findIndex(item => item.uid === uid)
      //   this.$refs.fileCondition.uploadFiles.splice(idx, 1)
      //    Message({
      //         message: error,
      //         type: 'error',
      //         duration: 3 * 1000
      //       })
      //    this.progressFlag=false;
      //    this.loadProgress = 0;
      // })
    },
    beforeRemove(file) {
      if (file && file.status === 'success') {
        return this.$confirm(`确定移除 ${file.name}？`)
      }
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    beforeUpload(file) {
      const listSize = file.size / 1024 / 1024 < 10;
      if (!listSize || file.size === 0) {
        this.$message.warning('上传文件大小不能小于0MB或超过10MB');
        return false;
      }
      var testmsg = file.name.substring(file.name.lastIndexOf(".") + 1);
       let pa = ['txt','doc','docx','xls','xlsx','ppt','pptx','pdf','jpg','png','bmp','gif','rar','zip'];
      const extension = pa.indexOf(testmsg)  === -1;
      var place=/[`%+?？`/?]/.test(file.name.substring(0,file.name.lastIndexOf(".")));
      if(place){
        this.$message({
          message: "文件名不能包含 + 或 % 或 ？字符，请修改。",
          type: "warning",
        });
        return false;
      }
      if (extension ) {
        this.$message({
          message: "请选择正确类型",
          type: "warning",
        });
        return false;
      }
      this.progressFlag = true; // 显示进度条
    },
    handleRemove(file) {
      console.log(this.listForm.fileCondition)
      const aIndex=this.listForm.fileCondition.findIndex(item=>{
        return item.uid==file.uid;
      })
      if(aIndex>=0){
      this.listForm.fileCondition.splice(aIndex,1)
      }
    },
    handleChange() {
      
    }
  }
};
</script>
<style lang="scss" scoped>
.roll-dialog{
  .el-form-item--small.el-form-item{
    margin-bottom: 16px;
  }
  .dialog-footer{
    text-align: right;
  }
}
</style>